<!-- 按研究方向 -->
<template>
	<view class="direction">
		<!-- 顶部图片说明 -->
		<!-- <view class="top-bg"></view> -->
		<image class="top-bg" src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/10/16/9a96f7f232a042a6bd4fb9d1a04bc105.png" mode="widthFix"></image>
		<view class="contents">
			<view class="searchs">
				<view class="search-box">
					<view class="input-box flex">
						<uni-icons type="search" size="20" color="#000" @click="handleSearch"></uni-icons>
						<input class="font14" placeholder="请输入研究方向，如 大数据" v-model="searchParam.direction" @input="handleSearch"/>
						<!-- <uni-icons @click="handleClear" type="clear" size="18" :color="searchParam.direction.length>0?'#F7DD5E':'#fff'"></uni-icons> -->
					</view>
				</view>
			</view>
			<view class="lists">
				<view class="list-item" v-for="(item,index) in majorList" :key="index">
					<view class="title font14 bold flex alignCenter"><image src="../../static/title-img.jpg" mode="widthFix"></image> {{item.name}}</view>
					<view class="major-item flex">
						<view class="major-name flex">
							<span class="font16 bold">{{item.majorCode}}-{{item.majorName}}</span> 
							<span class="type font12 bold">{{item.studyType=='1'?'全日制':(item.studyType=='2'?'非全日制':'')}}</span> 
						</view>
						<view class="hot-num font14 bold flex"><image src="@/static/image/index/hot.png" mode="widthFix"></image>{{item.hot}}</view>
					</view>
					<view class="year-schools flex flexWrap">
						<view class="school-item" v-for="(val,i) in ['2023','2022','2021','2020']" :key="i" @click="handleSchool(val,item)">
							<view class="icon-right"><uni-icons type="forward" size="16" color="#000"></uni-icons></view>
							<view class="num font12"><view class="font18 bold">{{item[val] || 0 }}</view> 所大学</view>
							<view class="year font12">{{val}}年</view>
						</view>
					</view>
					
					<!-- <view class="year-schools flex flexWrap">
						<view class="school-item" v-for="(val,i) in item.schools" :key="i">
							<view class="icon-right"><uni-icons type="forward" size="16" color="#000"></uni-icons></view>
							<view class="num font12"><view class="font18 bold">{{val.num}}</view> 所大学</view>
							
							<view class="year font12">{{val.year}}年</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="no-data" v-if="majorList.length<=0">
			<image src="http://image.alhelp.net/uploads/20231104/8d4f88d27dfddc10b427fbe997780eaf.png" mode="widthFix"></image>
			<view v-if="searchParam.direction.length<=0" class="font14 color999">输入研究方向以查询数据</view>
			<view v-else class="font14 color999">暂无数据</view>
		</view>
		<view v-else-if="majorList.length>=total" class="font12 noMore-data"> - 没有更多数据了 - </view>
	</view>
</template>

<script>
	import { listDirection } from "@/api/toolbox.js"
	export default {
		data() {
			return {
				total: 0,
				searchParam: {
					direction: "",
					pageNum: 1,
					pageSize: 10,
					reasonable: true,
					isKwkd:true,
					year: ""
				},
				
				majorList: [],
			}
		},
		onShow() {
			// this.getData();
		},
		methods: {
			handleSearch(){
				if(!this.searchParam.direction){
					uni.showToast({
						title: '请输入研究方向',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.searchParam.pageNum = 1;
				this.total = 1;
				this.getData();
			},
			handleClear(){
				this.searchParam.direction = '';
				this.handleSearch();
			},
			getData(){
				uni.showLoading({
					title: '数据加载中'
				})
				listDirection(this.searchParam).then((res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==100000){
						if(this.searchParam.pageNum == 1){
							this.majorList = res.data.rows;
							this.total = res.data.total;
							return
						}
						this.majorList.push.apply(this.majorList,res.data.rows);
					}
				}).catch(()=>{
					uni.hideLoading();
				})
			},
			// 跳转大学列表
			handleSchool(val,item){
				if(!item[val]){
					return
				}
				let option = {
					year: val,
					majorCode: item.majorCode,
					examCode: item.examSubject,
					direction: item.name,
					studyType: item.studyType,
					schoolCodeList: item[val+'schoolCode']
				} 
				uni.navigateTo({
					url: '/pages/toolbox/chooseMajor/school/serchSchool?item='+JSON.stringify(option)
				})
			},
			
			//底部刷新
			onReachBottom() {
				if(this.majorList.length>=this.total) return;
				// if(!this.isNext) return;
				this.searchParam.pageNum++;
				this.getData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #f2f2f2;
	}
	.direction{
		// background: #f2f2f2;
		// height: 100%;
		// min-height: 100vh;
		.top-bg{
			width: 100%;
			height: 280rpx;
			background: rgba(247,221,94,0.8);
			// background: rgba(114,94,237,0.8);
		}
		.contents{
			.searchs{
				margin: -80rpx 30rpx 16rpx 30rpx;
				height: 120rpx;
				background: #ffffff;
				box-shadow: 0 0 12rpx rgba(0,0,0,.2);
				border-radius: 20rpx;
				position: sticky;
				top: 0rpx;
				/* #ifdef H5 */
				top: 80rpx;
				/* #endif */
				z-index: 1;
				.search-box{
					padding-top: 30rpx;
					.input-box{
						align-items: center;
						justify-content: center;
						border: 1px solid rgba(242, 242, 242, 1);
						border-radius: 50rpx;
						margin: 0 30rpx;
						height: 68rpx;
						
						input{
							margin: 0 10rpx;
							width: 350rpx;
						}
					}
				}
				
			}
			
			.lists{
				margin: 0 30rpx;
				
				.list-item{
					box-shadow: 0 0 12rpx rgba(0,0,0,0.3);
					margin-bottom: 20rpx;
					border-radius: 20rpx;
					background: #ffffff;
					padding-bottom: 50rpx;
					
					.title{
						color: #7F7F7F;
						padding: 30rpx 0 40rpx 30rpx;
						align-items: center;
						image{
							width: 48rpx;
							height: 42rpx;
							margin-right: 10rpx;
							flex-shrink: 0;
						}
					}
					
					.major-item{
						align-items: center;
						justify-content: space-between;
						margin: 0 30rpx 24rpx 30rpx;
						// line-height: 1em;
						.major-name{
							align-items: center;
							color: #333333;
							
							span:nth-child(1){
								max-width: 410rpx;
							}
							.type{
								color: #aaaaaa;
								margin-left: 20rpx;
							}
						}
						.hot-num{
							color: #FF7101;
							// align-items: center;
						}
						image{
							width: 32rpx;
							height: 36rpx;
						}
					}
					
					.year-schools{
						margin: 0 30rpx;
						.school-item{
							background: rgba(248,248,248,1);
							border: 2rpx dotted #eee;
							border-radius: 10rpx;
							// margin-right: 10rpx;
							width: 146rpx;
							// height: 164rpx;
							margin: auto;
							text-align: center;
							padding-bottom: 10rpx;
							
							.icon-right{
								position: absolute;
								margin-left: 118rpx;
								margin-top: 48rpx;
							}
							.num{
								background: #fff;
								width: 96rpx;
								height: 96rpx;
								border-radius: 50%;
								color: #333;
								margin: auto;
								line-height: 32rpx;
								margin-top: 20rpx;
								view{
									color: #F7DD5E;
									padding-top: 10rpx;
									line-height: 1em;
								}
							}
							
							.year{
								color: #333;
								margin-top: 16rpx
								// line-height: 1em;
							}
						}
					}
					
				}
			}
		}
		.no-data{
			text-align: center;
			margin-top: 120rpx;
			image{
				width: 120rpx;
				height: 120rpx;
			}
		}
		
		.noMore-data{
			text-align: center;
			color: #afafaf;
			padding-bottom: 20rpx;
		}
	}
</style>